<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>订单明细</title>
    <!-- Bootstrap -->
    <link href="../assets/css/mui.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/boss_content.css" rel="stylesheet" />
  </head>

  <body>
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">订单明细</h1>
      <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <!--门店订单信息-->
      <div class="order-xq-info mui-row">
        <div class="mui-col-xs-6 order-mendian">门店：西城台店</div>
        <div class="mui-col-xs-6 order-number">订单号：12895663</div>
        <div class="mui-col-xs-6 order-taiwei">台位：101</div>
      </div>
      <!--订单样式-->
      <div class="order-xq-list kuaibgColor mui-row">
        <div class="mui-col-xs-4 order-survey-li order-xq-active">订单概况</div>
        <div class="mui-col-xs-4 orderXq-caipin-li">菜品明细</div>
        <div class="mui-col-xs-4 order-yongcanren-li">用餐人员</div>
      </div>
      <!--订单样式-->
      <div class="order-xq-content order-survey mui-row">
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">20</div>
            <div class="title">菜品数（份）</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">1551</div>
            <div class="title">金额（元）</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">10</div>
            <div class="title">人数</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">155.1</div>
            <div class="title">人均（元）</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">0</div>
            <div class="title">退菜（份）</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">0</div>
            <div class="title">赠送（份）</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">已结</div>
            <div class="title">状态</div>
          </div>
        </div>
        <div class="mui-col-xs-6 order-survey-list">
          <div class="order-survey-item kuaibgColor ">
            <div class="number">2017-02-01</div>
            <div class="title">下单</div>
          </div>
        </div>
      </div>
      <div class="order-caipin hidden">
        <div class="caipin-info mui-row">
          <div class="mui-col-xs-8">
            <div>支付方式：微信</div>
            <div>操作员：000</div>
            <div>下单时间：2017-02-01</div>
          </div>
          <div class="mui-col-xs-4 order-price">￥210</div>
        </div>
        <div class="orderXq-caipin-list kuaibgColor mui-row">
          <div class="mui-col-xs-3">菜名</div>
          <div class="mui-col-xs-3">单价（元）</div>
          <div class="mui-col-xs-3">数量（份）</div>
          <div class="mui-col-xs-3">金额（元）</div>
        </div>
        <div class="orderXq-caipin-con">
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">米饭</div>
            <div class="mui-col-xs-3">2</div>
            <div class="mui-col-xs-3">5</div>
            <div class="mui-col-xs-3">10</div>
          </div>
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">水饺</div>
            <div class="mui-col-xs-3">20</div>
            <div class="mui-col-xs-3">5</div>
            <div class="mui-col-xs-3">100</div>
          </div>
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">米饭</div>
            <div class="mui-col-xs-3">2</div>
            <div class="mui-col-xs-3">5</div>
            <div class="mui-col-xs-3">10</div>
          </div>
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">水饺</div>
            <div class="mui-col-xs-3">20</div>
            <div class="mui-col-xs-3">5</div>
            <div class="mui-col-xs-3">100</div>
          </div>
          
        </div>
      </div>
      <div class="order-yongcanren hidden">
        <div class="order-yongcanren-list kuaibgColor mui-row">
          <div class="mui-col-xs-4 ren-info">
            <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="ren-portrait">
            <span class="ren-username">王潇潇</span>
          </div>
          <div class="mui-col-xs-4 ren-tell">18456238899</div>
          <div class="mui-col-xs-4 ren-huifu">
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined orange-btn">回复</button>
          </div>
        </div>
        <div class="order-yongcanren-list kuaibgColor mui-row">
          <div class="mui-col-xs-4 ren-info">
            <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="ren-portrait">
            <span class="ren-username">王tutu</span>
          </div>
          <div class="mui-col-xs-4 ren-tell">18456238899</div>
          <div class="mui-col-xs-4 ren-huifu">
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined orange-btn">回复</button>
          </div>
        </div>
        <div class="order-yongcanren-list kuaibgColor mui-row">
          <div class="mui-col-xs-4 ren-info">
            <img src="../assets/images/8c1001e93901213f670feeba5de736d12f2e959c.jpg" class="ren-portrait">
            <span class="ren-username">王石</span>
          </div>
          <div class="mui-col-xs-4 ren-tell">18456238899</div>
          <div class="mui-col-xs-4 ren-huifu">
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined orange-btn">回复</button>
          </div>
        </div>
      </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/mui.js"></script>
    <script type="text/javascript">
      $('.order-survey-li').on('click',function(){
        $('.order-survey-li').addClass('order-xq-active');
        $('.orderXq-caipin-li').removeClass('order-xq-active');
        $('.order-yongcanren-li').removeClass('order-xq-active');
        $('.order-survey').removeClass('hidden');
        $('.order-caipin').addClass('hidden');
        $('.order-yongcanren').addClass('hidden');
      })
      $('.orderXq-caipin-li').on('click',function(){
        $('.orderXq-caipin-li').addClass('order-xq-active');
        $('.order-survey-li').removeClass('order-xq-active');
        $('.order-yongcanren-li').removeClass('order-xq-active');
        $('.order-survey').addClass('hidden');
        $('.order-caipin').removeClass('hidden');
        $('.order-yongcanren').addClass('hidden');
      })
      $('.order-yongcanren-li').on('click',function(){
        $('.order-yongcanren-li').addClass('order-xq-active');
        $('.orderXq-caipin-li').removeClass('order-xq-active');
        $('.order-survey-li').removeClass('order-xq-active');
        $('.order-survey').addClass('hidden');
        $('.order-caipin').addClass('hidden');
        $('.order-yongcanren').removeClass('hidden');
      })
    </script>
  </body>

</html>